<template>
  <div>
    <h3>父组件</h3>
    <!-- v-model的底层原理？ 语法糖？ -->
    <!-- 属性value的传值 加上 事件input的绑定 -->
    <!-- <input v-model="msg" type="text"> -->
    <!-- <input :value="msg" type="text" @input="handleTemp(1, $event)"> -->
    <input :value="msg" type="text" @input="handleTemp">
    <!-- v-model如果放在原生元素上面和自定义组件上面的区别 -->
    <child-com v-model="msg" />
    <h3>==== 父组件里面count的值: {{ count }}, num的值: {{ num }}</h3>
    <child-com :aaa.sync="count" :bbb.sync="num" :value="sssss" ccc="11111" />
    <h6>sssss.age::: {{ sssss.age }}</h6>
  </div>
</template>

<script>
import ChildCom from './ChildCom'

export default {
  name: '',
  components: {
    ChildCom
  },
  data() {
    return {
      msg: '测试',
      count: 10,
      num: 20,
      sssss: {
        age: 222
      }
    }
  },
  methods: {
    handleTemp(e) {
      console.log(e.target.value)
      this.msg = e.target.value
    }
  }
}
</script>
